<template>
  <div class="flow">
    <div class="formLook">
      <div class="container">
        <!-- 员工信息卡片 -->
        <div class="employee-card">
          <TitleComponent
            :title="route.query.text == 'edit' ? '调动申请编辑' : '调动申请'"
          />

          <div class="employee-avatar">
            <ImageComponent
              :src="userInfoForm.personPhoto"
              width="100px"
              height="100px"
              borderRadius="6px"
            />
          </div>
          <el-form label-width="100px" size="small" style="margin-left: 10px" >
            <div class="section-title">
              <span>员工信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="员工账号：" class="compact-form-item">
                  <div class="account-input-wrapper">
                    <el-input disabled class="no-border-input compact-input">
                      <template #suffix>
                        <el-tooltip content="选择员工账号" placement="top">
                          <el-button
                            type="primary"
                            link
                            @click="InfoClick"
                            class="account-select-btn"
                          >
                            <el-icon><User /></el-icon>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工号：">
                  <span>{{ userInfoForm.jobNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话：">
                  <span>{{ userInfoForm.phoneNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工作邮箱：">
                  <span>{{ userInfoForm.mail }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="岗位名称：">
                  <span>{{ userInfoForm.oldJobName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="岗位性质：">
                  <span>{{ userInfoForm.oldJobNature }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="部门：">
                  <span>{{ userInfoForm.oldDeptName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职级：">
                  <span>{{ positionLevelText }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="直属领导：">
                  <span>{{ userInfoForm.directLeaderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最高领导：">
                  <span>{{ userInfoForm.supremeLeaderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入职日期：">
                  <span>{{ userInfoForm.joinTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="转正日期：">
                  <span>{{ userInfoForm.becomePassTime }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="title">
          <span>申请流程</span>
          <el-divider></el-divider>
        </div>
        <!-- 申请流程 -->
        <div class="application-form">
          <el-form
            ref="formRef"
            :model="userInfoForm"
            :rules="rules"
            label-width="120px"
            label-position="top"
            style="margin-left: 10px"
          >
            <!-- <el-divider content-position="left"></el-divider> -->
            <!-- 调岗信息 -->
            <div class="section-title">
              <span>调岗信息</span>
            </div>

            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="调岗类型：" prop="typeTransfer">
                  <el-select
                    v-model="userInfoForm.typeTransfer"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="dict in normalizedTransferType"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="申请日期：" prop="applyDate">
                  <el-date-picker
                    v-model="userInfoForm.applyDate"
                    type="date"
                    placeholder="请选择"
                    style="width: 100%"
                    value-format="YYYY-MM-DD"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <div style="display: flex; justify-content: space-between">
              <div class="contianer-left">
                <div class="section-title">
                  <span>调岗后岗位信息</span>
                </div>
                <!-- 调岗后信息 -->
                <el-row :gutter="12">
                  <el-col :span="24">
                    <el-form-item label="调入岗位：" prop="newJobName">
                      <el-button @click="selectJob">选择岗位</el-button>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="调岗后岗位名称：" prop="newJobName">
                      <el-input
                        v-model="userInfoForm.newJobName"
                        placeholder="请选择"
                        disabled
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="调岗后岗位性质：" prop="nowJobNature">
                      <el-select
                        v-model="userInfoForm.nowJobNature"
                        placeholder="请选择"
                        style="width: 100%"
                      >
                        <el-option label="请选择" value=""></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="调岗后部门：" prop="newDeptName">
                      <el-select
                        v-model="userInfoForm.newDeptName"
                        placeholder="请选择"
                        style="width: 100%"
                        disabled
                      >
                        <el-option label="请选择" value=""></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="调岗后职级：" prop="nowPositionLevel">
                      <el-select
                        v-model="userInfoForm.nowPositionLevel"
                        placeholder="请选择"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in sys_rank_list"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item
                      label="调岗后直属领导："
                      prop="leaderAfterTransferName"
                    >
                      <el-select
                        v-model="userInfoForm.leaderAfterTransferId"
                        placeholder="请选择直属领导"
                      >
                        <el-option
                          v-for="item in leaderOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <!-- leaderAfterHighId -->
                    <el-form-item
                      label="调岗后最高领导："
                      prop="leaderAfterHighName"
                    >
                      <el-select
                        v-model="userInfoForm.leaderAfterHighId"
                        placeholder="请选择最高领导"
                      >
                        <el-option
                          v-for="item in leaderOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <div class="contianer-right">
                <!-- 调岗前信息 -->
                <div class="section-title">
                  <span>调岗前信息</span>
                </div>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="调岗前岗位名称：" prop="oldJobName">
                      <el-input
                        disabled
                        v-model="userInfoForm.oldJobName"
                        placeholder=""
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="调岗前岗位性质：" prop="oldJobNature">
                      <el-input
                        disabled
                        v-model="userInfoForm.oldJobNature"
                        placeholder=""
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="调岗前职级：">
                      <el-input
                        disabled
                        v-model="positionLevelText"
                        placeholder=""
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="调岗前部门：" prop="oldDeptName">
                      <el-input
                        disabled
                        v-model="userInfoForm.oldDeptName"
                        placeholder=""
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="调岗前直属领导："
                      prop="directLeaderName"
                    >
                      <el-input
                        disabled
                        v-model="userInfoForm.directLeaderName"
                        placeholder=""
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="调岗前最高领导："
                      prop="supremeLeaderName"
                    >
                      <el-input
                        disabled
                        v-model="userInfoForm.supremeLeaderName"
                        placeholder=""
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!-- 其他信息 -->
            <div class="section-title">
              <span>其他信息</span>
            </div>
            <el-form-item label="调岗说明：" prop="reasonTransfer">
              <el-input
                v-model="userInfoForm.reasonTransfer"
                type="textarea"
                :maxlength="300"
                placeholder="请输入"
                show-word-limit
              ></el-input>
            </el-form-item>
            <!-- 员工调动签字确认书 -->
            <el-form-item
              label="员工调动签字确认书："
              prop="SignatureConfirmation"
            >
              <Upload
                :modelValue="userInfoForm.SignatureConfirmation"
                :isShowTip="false"
              >
              </Upload>
            </el-form-item>
            <el-form-item label="其他附件：" prop="saveTransferFileVos">
              <Upload
                :modelValue="userInfoForm.saveTransferFileVos"
                :isShowTip="false"
                @update:modelValue="uploadFiles"
                @delete="handleFileDelete"
              >
              </Upload>
            </el-form-item>

            <!-- 按钮 -->
            <div class="button-group">
              <el-button @click="resetForm">关闭</el-button>
              <el-button @click="saveForm">保存</el-button>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </el-form>
        </div>
        <EmployeeDialog
          ref="employeeDialogRef"
          @update:selected="handleEmployeeSelected"
        />
        <!-- 岗位库选择 -->
        <PositionDialog
          ref="positionDialogRef"
          :department-options="buIdOptions"
          @confirm="handlePositionConfirm"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatDate } from "@/utils/index.js";
import ImageComponent from "@/components/ImageComponent.vue";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import EmployeeDialog from "@/components/EmployeeDialog/index.vue";
import PositionDialog from "@/components/PositionDialog/index.vue";
import Upload from "@/components/FileUpload/index.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from "vue-router";
import {
  transferInfoId,
  newTransfer,
  transferInfo,
} from "@/api/employeeRelations/transferManagement.js";
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";
import { seachPersonList } from "@/api/recruitment/needWorkers/index.js";

// 新增弹窗引用
const positionDialogRef = ref();
const router = useRouter();
// 部门
const buIdOptions = reactive([]);
const employeeDialogRef = ref(null);
const userInfoForm = reactive({
  id: "",
  deptId: "", //部门名称
  name: "", //员工账号
  jobNumber: "", //工号
  phoneNumber: "", //联系电话
  mail: "", //工作邮箱
  oldJobName: "", //岗位名称
  applicationPositonId: "", // 调岗前岗位id
  oldDeptName: "", //前部门
  oldJobNature: "", //岗位性质 调岗前
  positionLevel: "", //职级 调岗前
  directLeaderName: "", //直属领导
  supremeLeaderName: "", //最高领导
  joinTime: "", // 入职日期
  becomePassTime: "", //转正日期
  typeTransfer: "", //调岗类型
  applyDate: "", //申请日期

  newJobName: "", //调岗后岗位名称
  newJobId: "", //调岗后岗位id
  nowJobNature: "", //调岗后岗位性质
  newDeptName: "", //调岗后部门

  requireDeptId: "", // 调动后部门id

  nowPositionLevel: "", //调岗后职级
  leaderAfterTransferName: "", //调岗后直属领导
  leaderAfterTransferId: "", //调岗后直属领导id
  leaderAfterHighName: "", //调岗后最高领导
  leaderAfterHighId: "", //最高领导id
  reasonTransfer: "", //调岗说明
  saveTransferFileVos: [], //附件
  SignatureConfirmation: [], //员工签字调动确认书
});

const rules = reactive({
  typeTransfer: [
    { required: true, message: "请选择调岗类型", trigger: "change" },
  ],
  applyDate: [{ required: true, message: "请选择申请日期", trigger: "change" }],
  newJobName: [{ required: true, message: "请选择调入岗位", trigger: "blur" }],
  reasonTransfer: [
    { required: true, message: "请输入调岗说明", trigger: "blur" },
  ],
});

const formRef = ref(null);
const route = useRoute();
const { proxy } = getCurrentInstance();

const employeeData = ref([]);

const { sys_jobtransfer_typev2, sys_rank_list } = proxy.useDict(
  "sys_jobtransfer_typev2",
  "sys_rank_list"
);

const normalizedTransferType = computed(() => {
  return sys_jobtransfer_typev2.value.map((item) => ({
    label: item.label,
    value: Number(item.value), // 确保为数字类型
  }));
});

// 当前选中项的标签
const currentTransferLabel = computed(() => {
  const selected = normalizedTransferType.value.find(
    (item) => item.value === userInfoForm.typeTransfer
  );
  return selected?.label || "未找到匹配项";
});

// 字典值列表（调试用）
const transferTypeValues = computed(() => {
  return normalizedTransferType.value.map((item) => item.value);
});

onMounted(() => {
  getDemandDetailsList();
  seachPersonsList();
  // getAcquire();
  if (route.query.id) {
    getDetails();
  }
});
// 职级下拉框
const leaderOptions = reactive([]);
// 根据选中的员工id查询
function handleEmployeeSelected(item) {
  console.log(item, "选中的值");
  console.log(item[0]);
  // selectedItem.value = item; // 更新选中的项
  let params = {
    id: item[0],
  };
  transferInfoId(params).then((res) => {
    console.log(res.data, "调岗信息");
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        // 先重置为默认值（根据类型处理）
        userInfoForm[item] = typeof res.data[item] === "number" ? 0 : "";
        // 赋值前进行空值保护

        userInfoForm[item] = res.data[item] ?? userInfoForm[item];

        console.log(res.data.deptName, "res.data.deptName");

        userInfoForm.oldDeptName = res.data.deptName;
        userInfoForm.oldJobName = res.data.applicationPositonName;

        userInfoForm.oldJobNature = res.data.JobNature; //调岗前岗位性质
        userInfoForm.PositionLevel = res.data.PositionLevel; //调岗前职级
        // oldJobNature
      });
    }
  });
}

// 特殊字段处理函数
const handleSpecialFields = (formData, responseData) => {
  formData.typeTransfer = responseData.typeTransfer;
  formData.directLeaderName = responseData.directLeaderName;

  // 格式化日期字段
  formData.joinTime = formatDate(responseData.joinTime).dates;
  formData.becomePassTime = formatDate(responseData.becomePassTime).dates;
  formData.applyDate = formatDate(responseData.applyDate).dates;

  // 其他特殊字段处理
};

function getDetails() {
  transferInfo(route.query.id).then((res) => {
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        if (res.data[item] != null && res.data[item] != undefined) {
          userInfoForm[item] = res.data[item];
        }
      });
      // 调用特殊字段处理函数
      handleSpecialFields(userInfoForm, res.data);
    }
  });
}

const seachPersonsList = async () => {
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "BMLD",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      leaderOptions.push({
        label,
        value,
      });
    });
  }
};

const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();
  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};

const resetForm = () => {
  router.go(-1);
};

// 打开岗位库弹窗
const selectJob = () => {
  positionDialogRef.value.open();
};

// 选择岗位
const handlePositionConfirm = (selected) => {
  console.log(selected, "岗位信息-----");
  userInfoForm.newJobName = selected.jobName;
  userInfoForm.newDeptName = selected.requireDeptName;
  userInfoForm.newJobId = selected.id; // 当前岗位id
  userInfoForm.requireDeptId = selected.requireDeptId; //当前部门id
};

// const handleFormSubmit = (isSubmit) => {

//   let params = {
//     id: route.query.text == "edit" ? route.query.id : "",
//     flowKey: "jobtrasfer",
//     type: isSubmit ? 1 : 0, // 0 for save, 1 for submit
//     applicantPersonId:
//       route.query.text == "edit"
//         ? userInfoForm.applicantPersonId
//         : userInfoForm.id, // 员工id也是申请人id
//     typeTransfer: userInfoForm.typeTransfer, // 调动类型
//     applyDate: userInfoForm.applyDate, // 申请日期
//     oldJobId: userInfoForm.applicationPositonId, // 原岗位id
//     newJobId: userInfoForm.newJobId, // 现岗位id
//     oldDeptId: userInfoForm.deptId, // 原部门ID
//     newDeptId: userInfoForm.requireDeptId, // 现部门id
//     leaderAfterTransferId: userInfoForm.leaderAfterTransferId, // 调岗后直属领导id
//     leaderAfterHighId: userInfoForm.leaderAfterHighId, // 调岗后最高领导id
//     reasonTransfer: userInfoForm.reasonTransfer, // 调动原因
//     saveTransferFileDtoList: userInfoForm.saveTransferFileVos, //附件

//     oldJobNature: userInfoForm.oldJobNature, //调岗前岗位性质
//     newJobNature: userInfoForm.PositionLevel, //调岗前职级

//     oldPositionLevel: userInfoForm.positionLevel,
//     nowPositionLevel: userInfoForm.nowPositionLevel,
//   };

//   formRef.value.validate((valid) => {
//     if (valid) {
//       newTransfer(params)
//         .then((res) => {
//           if (res.code == 200) {
//             ElMessage.success(isSubmit ? "提交成功" : "保存成功");
//             // 进行相应的页面跳转或其他操作
//             resetForm();
//           } else {
//             ElMessage.error(res.message || "操作失败");
//           }
//         })
//         .catch((error) => {
//           console.error("Error during transfer:", error);
//           ElMessage.error("操作失败，请检查网络或联系管理员");
//         });
//     } else {
//       ElMessage.error("请填写必填项");
//     }
//   });
// };

// // 调用方法示例
// const saveForm = () => {
//   handleFormSubmit(false); // 保存操作
// };

// const submitForm = () => {
//   handleFormSubmit(true); // 提交操作
// };

// 参数
const buildTransferParams = (isSubmit) => {
  const isEdit = route.query.text === "edit";
  return {
    id: isEdit ? route.query.id : "",
    flowKey: "jobtrasfer",
    type: isSubmit ? 1 : 0,
    applicantPersonId: isEdit
      ? userInfoForm.applicantPersonId
      : userInfoForm.id,
    typeTransfer: userInfoForm.typeTransfer,
    applyDate: userInfoForm.applyDate,
    oldJobId: userInfoForm.applicationPositonId,
    newJobId: userInfoForm.newJobId,
    oldDeptId: userInfoForm.deptId,
    newDeptId: userInfoForm.requireDeptId,
    leaderAfterTransferId: userInfoForm.leaderAfterTransferId,
    leaderAfterHighId: userInfoForm.leaderAfterHighId,
    reasonTransfer: userInfoForm.reasonTransfer,
    saveTransferFileDtoList: userInfoForm.saveTransferFileVos,
    oldJobNature: userInfoForm.oldJobNature,
    newJobNature: userInfoForm.PositionLevel,
    oldPositionLevel: userInfoForm.positionLevel,
    nowPositionLevel: userInfoForm.nowPositionLevel,
  };
};

// 提交处理函数
const processTransfer = async (params, isSubmit) => {
  try {
    const res = await newTransfer(params);
    if (res.code === 200) {
      ElMessage.success(isSubmit ? "提交成功" : "保存成功");
      resetForm();
      return true;
    } else {
      ElMessage.error(res.message || "操作失败");
      return false;
    }
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败，请检查网络或联系管理员");
    return false;
  }
};

// 确认对话框函数
const showConfirmDialog = async (message) => {
  try {
    await ElMessageBox.confirm(message, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    return true;
  } catch {
    return false;
  }
};

// 主提交函数
const handleFormSubmit = async (isSubmit) => {
  console.log(isSubmit)
  // 表单验证
  try {
    const valid = await formRef.value.validate();
    console.log(valid)
    if (!valid) {
      ElMessage.error("请填写必填项");
      return;
    }

    // 构建参数
    const params = buildTransferParams(isSubmit);

    console.log(params)
    // 提交操作需要二次确认
    if (isSubmit) {
      const confirmed = await showConfirmDialog(
        "确定要提交该调动申请吗？提交后将进入审批流程，请确认信息无误！"
      );
      if (!confirmed) return;
    }

    // 执行提交
    await processTransfer(params, isSubmit);
  } catch (error) {
    console.error("表单验证异常:", error);
  }
};

const saveForm = () => handleFormSubmit(false);
const submitForm = () => handleFormSubmit(true);

const positionLevelText = computed(() => {
  const positionLevelMap = {
    0: "初级",
    1: "中级",
    2: "高级",
  };
  return positionLevelMap[userInfoForm.positionLevel] || "";
});
const InfoClick = async () => {
  employeeDialogRef.value.open((value) => {});
};

const uploadFiles = (files) => {
  if (!userInfoForm.saveTransferFileVos) {
    userInfoForm.saveTransferFileVos = [];
  }
  userInfoForm.saveTransferFileVos.push({
    file: files,
  });
};

const handleFileDelete = (updatedFiles) => {
  userInfoForm.saveTransferFileVos = updatedFiles;
};
</script>

<style scoped>
.container {
  margin: 0 auto;
}

.back-button {
  margin-bottom: 20px;
}

.employee-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.employee-avatar {
  text-align: left;
  margin-bottom: 20px;
  margin-top: 20px;
}

.application-form {
  background-color: #fff;
  border-radius: 8px;

  /* padding: 10px; */
}

.el-divider--horizontal {
  margin: 10px 0;
}

.button-group {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: bold;
  color: #606266;
}

:deep(.el-textarea__inner) {
  resize: none;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
  color: #16191d;
}

.position-container {
  display: flex;
}

.contianer-left {
  width: 48%;
}

.contianer-right {
  width: 48%;
}

span {
  width: 80%;
  /* 设定容器的宽度 */

  white-space: normal;
  /* 允许文本换行 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
}

.title {
  color: #16191d;
  span {
    margin-left: 10px;
  }
}
.no-border-input :deep(.el-input__wrapper) {
  box-shadow: none !important;
  background-color: transparent !important;
  padding-left: 0 !important; /* 可选：调整内容对齐 */
}

/* 悬停和聚焦状态也去除边框 */
.no-border-input :deep(.el-input__wrapper:hover),
.no-border-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

/* 禁用状态的背景色 */
.no-border-input :deep(.is-disabled .el-input__wrapper) {
  background-color: transparent !important;
}
</style>
